// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';


class ChildCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    }
  }

  static getDerivedStateFromProps(nextProps, nextState) {
    const { count } = nextProps; // 传递的 props

    if (count % 2 === 0) {
      return { number: count * 2 }
    } else {
      return { number: count * 3 }
    }
  }

  render() {
    return (
      <div>
        <p>{this.state.number}</p>
      </div>
    )
  }
}
class Counter extends React.Component {

  constructor(props) {
    super(props);
    this.state = { number: 0 };
  }

  handleClick = () => {
    this.setState({
      number: this.state.number + 1
    })
  }
  
  render() {
    return (
      <div>
        <p>{this.state.number}</p>
        <ChildCounter count={this.state.number} />
        <button onClick={this.handleClick}>+</button>
      </div>
    )
  }
}


ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",


// 新的生命周期中多了
// getDerivedStateFromProps 从新的属性(props)映射新的状态(state)对象
// getSnapShopBeforeUpdate 真正的 DOM 更新可以获取老的 DOM 的快照
// 新的生命周期中少了
// componentWillMont
// componentWillUpdate
// componentWillReceiveProps